<template>
    <div class="SSZ">
        <header>
            <van-nav-bar
            title="我购买的"
            left-arrow
            />
           <van-tabs v-model="active">
            <van-tab title="全部" class="Smada1">
                <ul class="Smada">
                    <li>马切达工作室</li>
                    <li> > </li>
                    <li>等待买家付款</li>
                </ul>
                <p>价格：$3600元</p>
                <ul class="Smada2">
                    <li>更多</li>
                    <li>取消订单</li>
                    <li>朋友代付</li>
                    <li>付款</li>
                </ul>
                <ul class="Smada">
                    <li>马切达工作室</li>
                    <li> > </li>
                    <li>等待买家付款</li>
                </ul>
                <p>价格：$3600元</p>
            </van-tab>

            <van-tab title="待付款" class="Smada1">
                <ul class="Smada">
                    <li>马切达工作室</li>
                    <li> > </li>
                    <li>等待买家付款</li>
                </ul>
                <p>价格：$3600元</p>
                <ul class="Smada2">
                    <li>更多</li>
                    <li>取消订单</li>
                    <li>朋友代付</li>
                    <li>付款</li>
                </ul>
            </van-tab>

            <van-tab title="待发货" class="Sma1">
                <ul class="Sma">
                    <li>马切达工作室</li>
                    <li> > </li>
                    <li>卖家已发货</li>
                </ul>
                <p>价格：$3600元</p>
                <ul class="Sma2">
                    <li>共一件商品</li>
                    <li>合计价格:$3600元</li>
                </ul>
                <ul class="Sma3">
                    <li>查看物流</li>
                    <li>延长收货</li>
                    <li>确认收货</li>
                </ul>
            </van-tab>

            <van-tab title="待收货" class="Smada4">
                <ul class="Smada3">
                    <li>马切达工作室</li>
                    <li> > </li>
                    <li>买家已付款</li>
                </ul>
                <p>价格：$3600元</p>
                <ul class="Smada5">
                    <li>共一件商品</li>
                <li>合计价格:$3600元</li>
                </ul>
            </van-tab>
            </van-tabs>
            
        </header>

        <section>
             
            
        </section>

        <footer>
             <ul>
                <li>首页</li>
                <li>分类</li>
                <li>发布</li>
                <li>购物车</li>
                <li>我的</li>
            </ul> 
        </footer>
    </div>
</template>

<script>
export default {
  data() {
    return {
      checked: '',
      active:1
    };
  },
  methods:{
      
  }

}

</script>


<style scoped>
*{
    margin: 0;
    padding: 0;
}
.SSZ{
    display: flex;
    height: 100vh;
    flex-direction: column;
    font-size: 0.12rem;
}
.van-nav-bar__text{
    color: #323233;
}
header,footer{
    height:0.8rem; 
}
section{
    flex:1;
    overflow:auto;
}
.Smada li{
    float: left;
    width: 2rem;
    height: 0.5rem;
    font-size: 0.3rem;
    margin-left: 0.2rem;
    margin-top: 0.6rem;
}
.Smada1 p{
    float: right;
    margin-top: 1.8rem;
    font-size: 0.4rem;
    width: 100%;
    text-align: right;
}

.Smada2 li{
    float: left;
    font-size: 0.4rem;
    margin-top: 2.5rem;
    margin-left: 0.6rem;
}

.Smada3 li{
    float: left;
    width: 2rem;
    height: 0.5rem;
    font-size: 0.3rem;
    margin-left: 0.2rem;
    margin-top: 0.6rem;
}
.Smada4 p{
    float: right;
    margin-top: 1.8rem;
    font-size: 0.4rem;
    width: 100%;
    text-align: right;
}

.Smada5 li{
    float: left;
    font-size: 0.4rem;
    margin-top: 2.5rem;
    margin-left: 0.6rem;
}

.Sma li{
    float: left;
    width: 2rem;
    height: 0.5rem;
    font-size: 0.3rem;
    margin-left: 0.2rem;
    margin-top: 0.6rem;
}
.Sma1 p{
    float: right;
    margin-top: 1.8rem;
    font-size: 0.4rem;
    width: 100%;
    text-align: right;
}

.Sma2 li{
    float: left;
    font-size: 0.4rem;
    margin-top: 2.5rem;
    margin-left: 0.6rem;
}

.Sma3 li{
    float: left;
    width: 2rem;
    height: 0.5rem;
    font-size: 0.3rem;
    margin-left: 0.2rem;
    margin-top: 0.6rem;
}

footer li{
    width: 1rem;
    height: 0.7rem;
    float: left;
    margin-left: 0.4rem;
    border: 1px  solid #ccc;
    line-height: 0.8rem;
    text-align: center;
    font-size: 0.26rem
}
footer li:hover{
    border-radius: 0.6rem;
}
</style>


